import React from 'react';
import {View, Text} from '@tarojs/components';
import {AtTag, AtIcon} from "taro-ui"
import './index.less'

export default function StationCard({station = {}}) {
  const {
    stationName,
    stationAddress,
    price,
    distance,
    gunCountInfo = {},
  } = station;
  return (
    <View className='stationCardWrap'>
      <View className='singleLine'>
        <View className='name'>
          {stationName}
        </View>
        {
          gunCountInfo?.fastALL && gunCountInfo?.fastALL !== 0 ?  <View>
            <AtTag size='small' type='primary' circle active>快</AtTag>&nbsp;&nbsp;
            <Text style={{color: '#00E39A'}}>{gunCountInfo?.fastNum}</Text>&nbsp;
            <Text style={{color: '#767E8E'}}>/</Text>&nbsp;
            <Text>{gunCountInfo?.fastALL}</Text>
          </View> : null
        }
      </View>
      <View className='singleLine'>
        <View style={{color: '#FA6400', fontWeight: 'bold'}}>{price || price === 0 ? price.toFixed(2) : '-'} <Text style={{fontSize: '24rpx'}}>元/度</Text></View>
        {
          gunCountInfo?.slowALL && gunCountInfo?.slowALL !==0 ? <View>
            <AtTag size='small' circle active >慢</AtTag>&nbsp;&nbsp;
            <Text style={{color: '#00E39A'}}>{gunCountInfo?.slowNum}</Text>&nbsp;
            <Text style={{color: '#767E8E'}}>/</Text>&nbsp;
            <Text>{gunCountInfo?.slowALL}</Text>
          </View> : null
        }
      </View>
      <View className='singleLine'>
        <View className='address'>
          <AtIcon value='map-pin' size='16'></AtIcon>
          <Text>
            {stationAddress}
          </Text>
        </View>
        <View>
          <AtIcon prefixClass='icon' value='daohang' size='16' color='#0091FF' />
          <Text style={{whiteSpace: 'nowrap'}}>
            {distance && distance.toFixed(2)} km
          </Text>
        </View>
      </View>
    </View>
  )
}
